<template>
	<view>
		<view style="height: 450upx;position: relative;background-color: #ffffff;">
			<view style="height: 340upx;background-color: #05052B;opacity: 0.8;"></view>
			<!-- banner -->
			<swiper autoplay="true" indicator-dots="true" circular="true" style="height: 352upx;position: absolute;width: 90%;top: 30upx;left: 5%;">
				<swiper-item v-for="(img,key) in data" :key="key">
					<image :src="img.resp_img" style="height: 352upx;width: 100%;" model="aspectFill"/>
				</swiper-item>
			</swiper>
			
			<view style="height: 40upx;position: absolute;width: 90%;bottom: 0;left: 5%;text-align: center;color: #b71c24;font-size: 36upx;line-height: 40upx;font-weight: 550;">
				<!-- ~喜~悦~人~生~ -->
			</view>
		</view>

		<view class="uni-tab-bar" >
			<view class="uni-swiper-tab">
				<block v-for="(i,index) in category" :key="index">
						<view class="swiper-tab-list" :class="{'active': tabIndex == index}" @tap="toggleTab(index, i.id)">
							<view class="swiper-tab-line">
									<view>
										<image v-show="tabIndex == index" style="width: 60upx;height: 60upx;margin-top: 25upx;" :src="i.src1"></image>
										<image v-show="tabIndex != index" style="width: 60upx;height: 60upx;margin-top: 25upx;" :src="i.src"></image>
										<view>{{i.category_name}}</view>
									</view>
							</view>
						</view>
				</block>
			</view>
		</view>
		
		<swiper :current="tabIndex" @change="tabChange" class="addheight" style="height: 800upx;">
			<swiper-item v-for="(content,index) in contentList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }">
				
				<view v-for="(item,index) in content.data" :key="index" style="width: 100%;height: 220upx;display: inline-block;">
						<view style="width: 94%;height: 96%;margin: 2% 3%;border-bottom: 2upx solid #ccc;position: relative;" @click="jumpgoods" :data-id='item.id'>
							<image src="../../static/shipin.png" mode="" style="position: absolute;width: 60upx;height: 60upx;z-index: 999999;left: 142upx;top: 68upx;"></image>
							<view style="height: 180upx;position: relative;">
								<image :src="item.resp_img" style="width: 40%;height: 160upx;margin: 20upx 5% 0;"></image>
								<view style="position: absolute;right: 0;top: 0;height: 160upx;width: 50%;margin-top: 20upx;">
									<view style="color: #777;">
										{{item.article_title}}
									</view>
									<view style="color: #777;">
										{{item.resp_desc}}
									</view>
								</view>
								<!-- <view class="delete" style="width: 40upx;height: 40upx;position: absolute;bottom: -20upx;right:30upx;">
									<image src="../../static/shanchu1.png" mode="" style="width: 40upx;height: 40upx;" @click="del"></image>
								</view> -->
							</view>
						</view>
				</view>
				
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[],
				openid:'',
				res:[],
				category:[
					{
						src : '../../static/41.png',
						src1 : '../../static/23.png'
					},
					{
						src : '../../static/42.png',
						src1 : '../../static/21.png'
					},
					{
						src : '../../static/44.png',
						src1 : '../../static/22.png'
					},
					{
						src : '../../static/43.png',
						src1 : '../../static/20.png'
					}
				],
				cateid: 0,
				tabCurrentIndex: 0,
				tabIndex: 0,	//选中标签栏的序列
				contentList: [{data:[]},{data:[]},{data:[]},{data:[]}
				],
				swiperHeight: 0
			};
		},
		onLoad:function(){
			// 页面显示是默认选中第一个
			this.tabCurrentIndex = 0;
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					console.log(this.category)
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=article.article_index&app=1',
					success: res => {
						this.data = res.data.article
						this.category = res.data.category
						// 设置默认显示的分栏
						this.cateid = res.data.category[0].id
						this.setAjax0()
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			// 列表内容
			setAjax0(){
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=article.list.getlist&app=1&page=1',
					data: {'cateid':this.cateid},
					success: res => {
						this.contentList[this.tabIndex].data = res.data.articles
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 点击顶部模块index
			toggleTab(index,id){
				this.tabIndex = index
				this.cateid = id
				this.setAjax0()
			},
			//滑动切换swiper
			tabChange(e){
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
			},
			del() {
				uni.showModal({
				title:'提示',
				content:'功能暂未开放',
				showCancel: false,
				confirmColor:"#DD524D",
					success() {
						return
					}
				})
			},
			jumpgoods(e) {
				uni.navigateTo({
					url: '../essay/essay?essaysid=' + e.currentTarget.dataset.id
				});
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
		}
	}
</script>

<style>
	.all {
		height: 100%;
		background-color: #eee;
	}
	.addheight {
		/* 调整每行列表的高度 */
		height: 500upx;
		background-color: #ffffff;
	}
	/* 内容区 */
	.contentindex {
		height: 100%;
		background-color: #fff;
	}
	.info {
		margin-top: 6upx;
	}
	.nav-item {
		display: flex;
		flex-wrap: wrap;
		overflow: scroll;
	}
	.swiper-item {
		margin-top: 10upx;
	}
	.time {
		margin-left: 10upx;
		font-size: 23upx;
		color: #999;
	}
	.swiper-item {
		display: flex;
		height: 100upx;
		background-color: #fff;
	}
	.swiper-item .imgclass{
		flex: 1;
	}
	.swiper-item .imgclass image {
		margin-top: 15upx;
		margin-left: 15upx;
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
	}
	.swiper-item .info{
		flex: 4;
	}
	.uni-swiper-tab{
		height: 200upx;
		border-bottom: 20upx solid #eeeeee;
	}
	.swiper-tab-list{
		text-align: center;
		width: 25%;
		height: 160upx;
		color: #000;
		font-weight: bold;
	}
	.imgclass {
		width: 100upx;
		height: 100upx;
		border-radius: 50upx;
	}
	/* .uni-tab-bar .active{
		height: 400upx;
		color: #ff9326;
		border-bottom: 4upx solid #ff9326;
	} */
	.uni-tab-bar {
		height: 200upx !important;
		background-color: #fff;
		margin-top: 10upx;
		height: 120upx;
	}
	.active .swiper-tab-line{
		color: #E1B132;
		margin: auto;
		margin-bottom: 25upx;
		
	}
</style>
